<template>
  <div class="total-wrap flex-row-between">
    <div
      v-for="item in totalList"
      :key="item.id"
      class="total-wrap-item flex-row-between"
      @click="handleClick(item)"
    >
      <div class="total-wrap-item-right flex-col-center">
        <p class="total-wrap-item-right-num">
          <DynamicStatistic :total="item.num" />
        </p>
        <p>{{ item.title }}</p>
      </div>
    </div>
    <DetailDialog v-if="show" :options="optionItem" @close="close" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import DetailDialog from '../DetailDialog.vue'
import useShowDialog from '@screen/hooks/useShowDialog'
import DynamicStatistic from '../DynamicStatistic.vue'

const { show, close, handleClick, optionItem } = useShowDialog()

const props = withDefaults(
  defineProps<{
    list: Record<string, any>[]
  }>(),
  {
    list: () => [],
  },
)

watch(
  () => props.list,
  (newVal) => {
    updateData(newVal)
  },
  {
    deep: true,
  },
)

function updateData(data: Record<string, any>) {
  if (!data?.length) return
  let oldTotalList = totalList.value

  oldTotalList = oldTotalList.map((item) => {
    const curType = data.find((dataItem) => dataItem.type === item?.type)
    return {
      ...item,
      num: curType ? curType?.number : 0,
      matterIdStr: curType ? curType?.ids : '',
    }
  })

  totalList.value = oldTotalList
}

const totalList = ref([
  {
    id: 1,
    title: '事件总数',
    num: 0,
    type: 'all',
  },
  {
    id: 2,
    title: '正常推进',
    num: 0,
    type: 'normal',

    matterStatus: 1,
  },
  {
    id: 3,
    title: '已完成',
    num: 0,
    type: 'completed',

    matterStatus: 3,
  },
  {
    id: 7,
    title: '未签收',
    num: 0,
    type: 'notSigned',

    matterStatus: 4,
  },
  {
    id: 4,
    title: '已超时',
    num: 0,
    type: 'timeOut',

    matterStatus: 2,
  },
  {
    id: 5,
    title: '已发黄牌',
    num: 0,
    type: 'yellowCard',
    cardState: 1,
  },
  {
    id: 6,
    title: '已发红牌',
    num: 0,
    type: 'redCard',
    cardState: 2,
  },
])
</script>

<style lang="scss" scoped>
.total-wrap {
  margin-bottom: vh(30);
  padding: 0 vw(48);
  height: vh(48);
  &-item {
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
      transition: all 0.3s ease-in-out;
    }

    &:hover &-right {
      color: var(--big-screent-hover-color);
    }
    &:hover &-right-num {
      background: var(--big-screent-hover-color);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    &-icon {
      width: vw(52);
      height: vh(52);
    }

    &-right {
      color: rgba(208, 222, 238, 1);
      text-align: center;

      &-num {
        color: #fff;
        margin-bottom: vh(6);
        font-size: vw(28);
        font-weight: 700;
        font-family: 'DDin', sans-serif;
      }
    }
  }
}
</style>
